<template>
	<view class="page-body">
		<!-- 页面内容开始 -->
		<!-- 自定义按钮区域开始 -->
		<view>
			<el-row>
				<el-button type="success" size="small" icon="el-icon-circle-plus-outline" @click="addBtn">添加</el-button>
				<!-- 批量操作 -->
				<!-- <el-dropdown v-if="table1.multipleSelection" :split-button="false" trigger="click" @command="batchBtn">
					<el-button type="danger" size="small" style="margin-left: 20rpx;"
						:disabled="table1.multipleSelection.length === 0">
						批量操作<i class="el-icon-arrow-down el-icon--right"></i>
					</el-button>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item :command="1">批量删除</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown> -->
			</el-row>
		</view>
		<!-- 自定义按钮区域结束 -->

		<!-- 表格组件开始 -->
		<!-- more -->
		<vk-data-table ref="table1" :action="table1.action" :columns="table1.columns" :query-form-param="queryForm1"
			:right-btns="['detail_auto','update','delete']" :selection="true" :row-no="true" :pagination="true"
			@update="updateBtn" @delete="deleteBtn" @current-change="currentChange" @selection-change="selectionChange"
			:right-btns-more="table1.rightBtnsMore">
		</vk-data-table>

		<!-- 添加或编辑的弹窗开始 -->
		<vk-data-dialog v-model="form1.props.show" :title="form1.props.title" width="1200px" mode="form"
			:close-on-click-modal="false">
			<div style="padding: 10px;">
				<el-tabs v-model="tab">
					<el-tab-pane label="小程序基础设置" name="base">
						<el-form v-if="tab == 'base'" :model="data.ruleForm" :rules="data.rules" ref="ruleForm">
							<el-form-item label="Dcloud AppID：" prop="appid" required>
								<el-col :span="10">
									<el-input v-model="data.ruleForm.appid"></el-input>
								</el-col>
							</el-form-item>
							<el-form-item label="小程序名称：" prop="appname" required>
								<el-col :span="10">
									<el-input v-model="data.ruleForm.appname"></el-input>
								</el-col>
							</el-form-item>
							<el-form-item label="小程序图标：" prop="appicon" required>
								<el-col :span="10">
									<vk-data-upload v-model="data.ruleForm.appicon" :limit="1"></vk-data-upload>
								</el-col>
							</el-form-item>
							<el-form-item label="状态">
								<el-tooltip :content="data.ruleForm.status == 0 ? '点击启用' : '点击禁用'" placement="top" :hide-after="1000"
									:enterable="false" effect="light">
									<el-switch v-model="data.ruleForm.status" active-value="1" inactive-value="0"></el-switch>
								</el-tooltip>
							</el-form-item>
						</el-form>
					</el-tab-pane>
					<el-tab-pane label="广告设置" name="adset">
						<adset v-if="tab == 'adset'" :adInfoSet="data.ruleForm.adInfoSet"></adset>
					</el-tab-pane>
					<el-tab-pane label="推荐小程序" name="shareapp">
						<share-app v-if="tab == 'shareapp'" :recommendApp="data.ruleForm.recommendApp"></share-app>
					</el-tab-pane>
					<el-tab-pane label="分享设置" name="share">
						<share v-if="tab == 'share'" :shareInfo="data.ruleForm.shareInfo"></share>
					</el-tab-pane>
					<el-tab-pane label="关于我们" name="about">
						<about v-if="tab == 'about'" :aboutInfo="data.ruleForm.aboutInfo"></about>
					</el-tab-pane>
				</el-tabs>

				<el-button @click="saveConfig()" style="margin-top: 40px;" type="primary">保存</el-button>

			</div>
			<!-- <vk-data-form v-model="form1.data" :rules="form1.props.rules" :action="form1.props.action"
				:form-type="form1.props.formType" :columns='form1.props.columns' label-width="130px"
				@success="form1.props.show = false;refresh();"></vk-data-form> -->

		</vk-data-dialog>
		<!-- 添加或编辑的弹窗结束 -->

		<!-- 页面内容结束 -->
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk = uni.vk; // vk实例
	var originalForms = {}; // 表单初始化数据
	var action = "admin/app/app-list/sys"

	import adset from "./ad_set.vue";
	import shareApp from "./shareapp.vue";
	import share from "./share_set";
	import about from "./about";

	export default {
		components: {
			adset,
			shareApp,
			share,
			about
		},
		data() {
			// 页面数据变量
			return {
				tab: "base",
				form: {},
				// 页面是否请求中或加载中
				loading: false,
				// init请求返回的数据
				// init请求返回的数据
				data: {
					ruleForm: {
						appid: '',
						appname: '',
						appicon: '',
						status: "1",
						adInfoSet:{
							bannerAd:'',
							jiliAd:'',
							chapingAd:'',
							customAd:'',
						},
						recommendApp: [],
						shareInfo: {
							share_title: '',
							share_img: '',
							share_desc: '',
							status: 0
						},
						aboutInfo: {
							yszc: {
								content: null,
								status: 0,
							},
							yhxy: {
								content: null,
								status: 0,
							},
							gg: {
								content: null,
								status: 0,
							},
						},
					},
					rules: {
						appid: [{
								required: true,
								message: '该项为必填项',
								trigger: 'blur'
							},
							{
								min: 1,
								max: 30,
								message: '长度在 1 到 30 个字符',
								trigger: 'blur'
							}
						],
						appname: [{
								required: true,
								message: '该项为必填项',
								trigger: 'blur'
							},
							{
								min: 1,
								max: 10,
								message: '长度在 1 到 10 个字符',
								trigger: 'blur'
							}
						],
						cascade: [{
							required: false,
							message: '请输入活动名称',
							trigger: 'blur'
						}],
						region: [{
							required: true,
							message: '请至少选择一个',
							trigger: 'change'
						}],
						date1: [{
							type: 'date',
							required: true,
							message: '请选择日期',
							trigger: 'change'
						}],
						date2: [{
							type: 'date',
							required: true,
							message: '请选择时间',
							trigger: 'change'
						}],
						type: [{
							type: 'array',
							required: true,
							message: '请至少选择一个',
							trigger: 'change'
						}],
						resource: [{
							required: true,
							message: '请至少选择一个',
							trigger: 'change'
						}],
						desc: [{
							required: true,
							message: '该项为必填项',
							trigger: 'blur'
						}]
					}
				},
				// 表格相关开始 -----------------------------------------------------------
				table1: {
					rightBtnsMore: [{
							title: '查看使用记录',
							onClick: (item) => {
								uni.navigateTo({
									url: "/pages/user/useRecord?item=" + JSON.stringify({
										openid: item.openid
									})
								})
							}
						},

					],
					// 表格数据请求地址
					action: action + "/getList",
					// 表格字段显示规则
					columns: [{
							key: "_id",
							title: "id",
							type: "text",
						},
						{
							key: "appid",
							title: "Dcloud AppID",
							type: "text",
							width: 200
						},
						{
							key: "appname",
							title: "小程序名称",
							type: "text",
							width: 200
						},
						{
							key: "appicon",
							title: "icon",
							type: "image",
							limit: 1
						},
						{
							key: "status",
							title: "是否开启",
							type: "tag",
							defaultValue: 1,
							data: [{
									value: 1,
									label: "允许",
									tagType: "success"
								},
								{
									value: 0,
									label: "禁止",
									tagType: "danger"
								}
							]
						},
					],
					// 多选框选中的值
					multipleSelection: [],
					// 当前高亮的记录
					selectItem: ""
				},
				// 表格相关结束 -----------------------------------------------------------
				// 表单相关开始 -----------------------------------------------------------
				// 查询表单请求数据
				queryForm1: {
					// 查询表单数据源，可在此设置默认值
					formData: {

					},
					// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
					columns: [{
							key: "_id",
							title: "id",
							type: "text",
						},
						{
							key: "appid",
							title: "Dcloud AppID",
							type: "text",
							width: 200
						},
						{
							key: "appname",
							title: "小程序名称",
							type: "text",
							width: 200
						},
						{
							key: "appicon",
							title: "icon",
							type: "image",
							limit: 1
						},
						{
							key: "status",
							title: "是否开启",
							type: "select",
							data: [{
									value: 1,
									label: "开启"
								},
								{
									value: 0,
									label: "禁用"
								}
							]
						},
					]
				},
				form1: {
					// 表单请求数据，此处可以设置默认值
					data: {

					},
					// 表单属性
					props: {
						// 表单请求地址
						action: "",
						// 表单字段显示规则
						columns: [{
							key: "_id",
							title: "id",
							type: "text",
						},
						{
							key: "appid",
							title: "Dcloud AppID",
							type: "text",
							width: 200
						},
						{
							key: "appname",
							title: "小程序名称",
							type: "text",
							width: 200
						},
						{
							key: "appicon",
							title: "icon",
							type: "image",
							limit: 1
						},
							{
								key: "status",
								title: "是否开启",
								type: "select",
								data: [{
										value: 1,
										label: "开启"
									},
									{
										value: 0,
										label: "禁用"
									}
								]
							},
						],
						// 表单验证规则
						rules: {
							adname: [
								// 必填
								{
									required: true,
									message: "请输入广告位名称",
									trigger: ['blur', 'change']
								}
							],
							ad_id: [
								// 必填
								{
									required: true,
									message: "请输入广告位id",
									trigger: ['blur', 'change']
								}
							],
							status: [
								// 必填
								{
									required: true,
									message: "状态不能为空",
									trigger: ['blur', 'change']
								}
							],
						},
						// add 代表添加 update 代表修改
						formType: "",
						// 是否显示表单的弹窗
						show: false
					}
				},
				// 其他弹窗表单
				formDatas: {},
				// 表单相关结束 -----------------------------------------------------------
			};
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.options = options;
			that.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			saveConfig(){
				var appInfo = this.data.ruleForm
				console.log(appInfo)
				appInfo.status = parseInt(appInfo.status)
				if(appInfo.appid.length == 0){
					this.$message({
						message: '请输入AppID',
						type: 'warning'
					});
					return
				}
				if(appInfo.appname.length == 0){
					this.$message({
						message: '请输入小程序名称',
						type: 'warning'
					});
					return
				}
				if(appInfo.appicon.length == 0){
					this.$message({
						message: '请添加小程序图标',
						type: 'warning'
					});
					return
				}
				if(appInfo._id){
					vk.callFunction({
						url: 'admin/app/app-list/sys/update',
						title: '请求中...',
						data: appInfo,
						success: (data) => {
					
						},
						fail: (err) => {
					
						},
						complete: (res) => {
					
						}
					});
				}else {
					vk.callFunction({
						url: 'admin/app/app-list/sys/add',
						title: '请求中...',
						data: appInfo,
						success: (data) => {
					
						},
						fail: (err) => {
					
						},
						complete: (res) => {
					
						}
					});
				}
				that.form1.props.show = false;
				that.refresh()
			},
			// 页面数据初始化函数
			init(options) {
				originalForms["form1"] = vk.pubfn.copyObject(that.form1);
			},
			// 页面跳转
			pageTo(path) {
				vk.navigateTo(path);
			},
			// 表单重置
			resetForm() {
				vk.pubfn.resetForm(originalForms, that);
			},
			// 搜索
			search() {
				that.$refs.table1.search();
			},
			// 刷新
			refresh() {
				that.$refs.table1.refresh();
			},
			// 获取当前选中的行的数据
			getCurrentRow() {
				return that.$refs.table1.getCurrentRow();
			},
			// 监听 - 行的选中高亮事件
			currentChange(val) {
				that.table1.selectItem = val;
			},
			// 当选择项发生变化时会触发该事件
			selectionChange(list) {
				that.table1.multipleSelection = list;
			},
			// 显示添加页面
			addBtn() {
				that.resetForm();
				that.form1.props.action = action + '/add';
				that.form1.props.formType = 'add';
				that.form1.props.title = '添加';
				that.form1.props.show = true;
				that.data.ruleForm = {
						appid: '',
						appname: '',
						appicon: '',
						status: "1",	
						adInfoSet:{
							bannerAd:'',
							jiliAd:'',
							chapingAd:'',
							customAd:'',
						},
						recommendApp: [],
						shareInfo: {
							share_title: '',
							share_img: '',
							share_desc: '',
							status: 0
						},
						aboutInfo: {
							yszc: {
								content: null,
								status: 0,
							},
							yhxy: {
								content: null,
								status: 0,
							},
							gg: {
								content: null,
								status: 0,
							},
						},
					}
			},

			// 显示修改页面
			updateBtn({
				item
			}) {
				that.form1.props.action = action + '/update';
				that.form1.props.formType = 'update';
				that.form1.props.title = '编辑';
				that.form1.props.show = true;
				// that.form1.data = item
				that.data.ruleForm = item
				that.data.ruleForm.status = ""+that.data.ruleForm.status
			},
			// 删除按钮
			deleteBtn({
				item,
				deleteFn
			}) {
				deleteFn({
					action: action + "/delete",
					data: {
						_id: item._id
					},
				});
			},
			// 批量删除
			delete(ids) {
				let data = {

				};
				if (vk.pubfn.isNull(ids)) {
					ids = vk.pubfn.arrayObjectGetArray(that.table1.multipleSelection, "_id");
				}

				if (vk.pubfn.isArray(ids)) {
					data["ids"] = ids;
				} else {
					data["ids"] = [ids];
				}
				vk.callFunction({
					url: action + '/delete',
					title: '请求中...',
					data,
					success: function(data) {
						that.refresh();
					}
				});
			},
			// 监听 - 批量操作的按钮点击事件
			batchBtn(index) {
				switch (index) {
					case 1:
						this.delete()
						break;
					default:
						break;
				}
			}
		},
		// 监听属性
		watch: {

		},
		// 过滤器
		filters: {

		},
		// 计算属性
		computed: {

		}
	};
</script>
<style lang="scss" scoped>
	.page-body {}

	.itemBgView {
		display: flex;
		flex-direction: column;

		.itemView {
			display: flex;
			flex-direction: row;
			margin-bottom: 10px;
			align-items: center;

			.title {
				width: 100px;

			}
		}
	}
</style>